<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Bootstrap-modal by jschr</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<style>
body {
	padding-top: 40px;
}
</style>
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="css/bootstrap-modal.css" rel="stylesheet" />
<style>
.text-center {
	text-align: center;
}

.marketing h1 {
	font-size: 50px;
	font-weight: lighter;
	line-height: 1;
}

.marketing p {
	font-size: 18px;
}
</style>
</head>
<body>
	<div class="page-container">
		<div class="container" style="position: relative">
			<div class="row">
				<div class="span10">
					<div class="stackable">
						<div class="text-center">
							<button class="demo btn btn-primary btn-large"
								data-toggle="modal" href="#stack1">View Demo</button>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id="stack1" class="modal hide fade" tabindex="-1"
			data-focus-on="input:first">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Stack One</h3>
			</div>
			<div class="modal-body">
				<p>One fine body…</p>
				<p>One fine body…</p>
				<p>One fine body…</p>
				<input type="text" data-tabindex="1" /> <input type="text"
					data-tabindex="2" />
				<button class="btn" data-toggle="modal" href="#stack2">Launch
					modal</button>
			</div>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn">Close</button>
				<button type="button" class="btn btn-primary">Ok</button>
			</div>
		</div>

		<div id="stack2" class="modal hide fade" tabindex="-1"
			data-focus-on="input:first">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Stack Two</h3>
			</div>
			<div class="modal-body">
				<p>One fine body…</p>
				<p>One fine body…</p>
				<input type="text" data-tabindex="1" /> <input type="text"
					data-tabindex="2" />
				<button class="btn" data-toggle="modal" href="#stack3">Launch
					modal</button>
			</div>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn">Close</button>
				<button type="button" class="btn btn-primary">Ok</button>
			</div>
		</div>

		<div id="stack3" class="modal hide fade" tabindex="-1"
			data-focus-on="input:first">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Stack Three</h3>
			</div>
			<div class="modal-body">
				<p>One fine body…</p>
				<input type="text" data-tabindex="1" /> <input type="text"
					data-tabindex="2" />
			</div>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn">Close</button>
				<button type="button" class="btn btn-primary">Ok</button>
			</div>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script src="js/bootstrap-modalmanager.js"></script>
	<script src="js/bootstrap-modal.js"></script>
</body>
</html>
